<!-- 正文开始 -->
<style>
    :root {
        --theme1: #2CBB79; /*主题颜色1*/
        --bgColor1: #F7F8FA; /*背景颜色*/
        --rpBgColor: #fff; /*图表背景颜色*/
    }

    .layui-body-header + div {
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        bottom: 0;
        overflow: auto;
    }

    .layui-fluid {
        padding: 0 10px 0 20px;
        overflow-y: scroll;
        /*background-color: var(--bgColor1);*/
    }

    .layui-form-select dl dd.layui-this {
        background-color: var(--theme1)
    }

    /*头部标题 时间选择*/
    .headerBox {
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        z-index: 9999;
        background-color: #F0F2F5;
    }

    .headerTitle {
        height: 26px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 23px;
        position: relative;
        padding: 0 16px;
    }

    .headerTitle:before {
        content: "";
        display: block;
        height: 100%;
        width: 6px;
        background: #009C5E;
        position: absolute;
        left: 0;
        top: 0;
    }

    .headerTime {
        display: flex;
    }

    .headerTime .timeSelect,
    .headerTime .selectBox {
        width: 110px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        padding: 5px 10px;
        border: 1px solid #EDEFF4;
        margin-right: 10px;
    }

    .headerTime .timeFreedom {
        box-sizing: border-box;
        width: 270px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #EDEFF4;
        padding: 5px 10px;
        line-height: 38px;
        display: flex;
    }

    .timeFreedom input,
    .headerTime .timeSelect input,
    .headerTime .selectBox input {
        border-width: 0;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 19px;
    }

    .timeFreedom .layui-icon {
        font-size: 30px;
        cursor: pointer;
    }

    .timeFreedom input {
        width: calc(100% - 30px);
        display: inline-block;
    }

    .timeFreedom input::placeholder {
        font-size: 16px;
    }

    /*头部数据统计样式*/
    .statBox {
        margin-bottom: 20px;
    }

    .statBox > .statBoxItem {
        display: flex;
        justify-content: space-between;
    }

    .statBoxItem > .statBoxItemList {
        box-sizing: border-box;
        padding: 28px 20px;
        height: 132px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        display: flex;
        cursor: pointer;
        transition: all 300ms;
    }

    .statBoxItem > .statBoxItemList:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
    }

    .statBoxItemList > .statBoxItemListContent {
        flex: 1;
    }

    .statBoxItemListImg {
        width: 70px;
        height: 70px;
        margin-top: 3px;
    }

    .statBoxItemListContent .statBoxItemListName {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        margin-bottom: 10px;
        white-space: nowrap;
    }

    .statBoxItemListContent .statBoxItemListNum {
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        line-height: 42px;
    }

    /* 报表内容区域*/
    .reportMain {
        width: 100%;
    }

    .reportBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /*单个报表*/
    .reportItem {
        display: flex;
        flex-direction: column;
        background-color: var(--rpBgColor);
        margin-bottom: 20px;
        padding: 20px;
        transition: all 1000ms;
        box-sizing: border-box;
        overflow: hidden;
    }

    /*单个报表头部区域*/
    .reportItem > .reportItemHeader {
        display: flex;
        justify-content: space-between;
        height: 22px;
        align-items: center;
        margin-bottom: 10px;
    }

    .reportItemHeader > .reportItemTitle {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 23px;
    }

    .reportItemHeader .reportItemRight {
        display: flex;
        align-items: center;
    }

    .reportItemRight .reportItemSelect {
        width: 110px;
        background: #F5F6FA;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        margin-right: 10px;
    }

    .reportItemSelect .layui-input {
        border-width: 0;
        background-color: #F5F6FA;
    }

    .reportItemSelect .layui-form-select .layui-edge {
        color: var(--theme1);
    }

    .reportItemRight .reportItemSwitch {
        width: 106px;
        height: 24px;
        background: #9AAEBB;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 2px;
        display: flex;
        margin-left: 15px;
    }

    .reportItemSwitch .reportItemSwitchItem {
        width: 51px;
        height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 20px;
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
        transition: all 300ms;
    }

    .reportItemSwitch .reportItemSwitchItem.active {
        background-color: #fff;
        color: #9AAEBB;
    }

    .reportItemRight .reportItemMore {
        margin-left: 15px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    .reportItem .reportItemUnit {
        height: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }

    .reportItemTips {
        display: flex;
        height: 42px;
        overflow: hidden;
        box-sizing: border-box;
        margin: 5px 0;
    }

    .reportItemTips > div {
        flex: 1;
        height: 42px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #9AAEBB;
        box-sizing: border-box;
        margin-right: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .reportItemTips > div:last-child {
        margin-right: 0;
    }

    .reportItemTips > div img {
        width: 28px;
        height: 28px;
        overflow: hidden;
        margin-right: 10px;
    }

    .reportItemTips > div p {
        font-size: 14px;
        font-weight: 400;
        color: #E55B4A;
        line-height: 16px;
    }

    .colorGrey > div p {
        color: #333333;
    }


    /*单个报表内容区域*/
    .reportItem .reportItemBox {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        /*scrollbar-width: 0;*/
    }

    .reportItemBox .reportItemEcharts {
        height: 100%;
        width: 100%;
    }

    .reportItemBox .reportItemCenter {
        width: 100%;
        height: auto;
    }

    .listBox1 > .listItem1 {
        display: flex;
        align-items: center;
        margin-top: 15px;
    }

    .listItem1 .listItem1Name {
        width: 70px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem1 .listItem1ProgressBox {
        margin-right: 20px;
        margin-left: 10px;
        flex: 1;
        height: 16px;
        background: #EDEFF2;
        border-radius: 20px;
        display: flex;
        position: relative;
    }

    .listItem1ProgressBox .listItem1ProgressBar {
        height: 100%;
        border-radius: 7px 7px 7px 7px;
        background: linear-gradient(90deg, #B6CD6A 0%, #009C5E 100%);
        width: 0;
    }

    .listItem1:first-child .listItem1Ratio {
        color: #FFB94D;
    }

    .listItem1Value {
        position: absolute;
        right: 0;
        transform: translateX(-5px);
    }

    .listBox2 > .listItem2 {
        display: flex;
        margin-top: 15px;
        flex-direction: column;
        justify-content: center;
    }

    .listItem2ProgressBox {
        width: calc(100% - 110px);
        height: 8px;
        margin-top: 5px;
    }

    .listItem2ProgressBar {
        height: 8px;
        background: #72B65F;
        position: relative;
        width: 0;
    }

    .listItem2ProgressBar:before {
        position: absolute;
        content: attr(ratio);
        display: block;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        color: #009C5E;
        line-height: 14px;
        right: -100px;
        width: 50px;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
        overflow: hidden;
    }

    .listItem2ProgressBar:after {
        position: absolute;
        content: attr(val);
        display: block;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        color: #333333;
        line-height: 14px;
        right: -55px;
        width: 50px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        overflow: hidden;
    }

    .listBox3Header {
        display: flex;
        height: 52px;
        background: #F2F4F8;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        align-items: center;
    }

    .listItem3 {
        display: flex;
        height: 52px;
        border-bottom: 1px dashed #ccc;
        box-sizing: border-box;
        align-items: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        color: #000000;
    }


    .listBox3Header .listBox3HeaderAvatar {
        width: 60px;
        margin-right: 10px;
        text-align: center;
    }

    .listItem3 .listBox3Avatar {
        width: 60px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .listItem3 .listBox3Avatar img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }


    .listBox3Header .listBox3HeaderName,
    .listItem3 .listBox3Name,
    .listBox3Header .listBox3HeaderAbnormal,
    .listItem3 .listBox3Abnormal,
    .listBox3Header .listBox3HeaderDepartment,
    .listItem3 .listBox3Department {
        flex: 1;
        margin-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .listBox3Header .listBox3HeaderRatio,
    .listItem3 .listBox3Ratio {
        width: 80px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .listBox4 > .listItem4 {
        display: flex;
        margin-top: 15px;
        align-items: center;
    }

    .listItem4Name {
        width: 100px;
        margin-right: 10px;
        overflow: hidden;
    }

    .listItem4ProgressBox {
        flex: 1;
        height: 20px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 10px;
        background-image: linear-gradient(#fff, #fff), linear-gradient(to right, rgba(182, 205, 106, 1), rgba(0, 156, 94, 1));
        background-origin: border-box;
        background-clip: content-box, border-box;
    }

    .listItem4ProgressBar {
        background-image: linear-gradient(to right, #B6CD6A, #009C5E);
        border: 2px solid transparent;
        box-sizing: border-box;
        height: 18px;
        border-radius: 7px;
        background-clip: content-box;
        width: 10%;
    }

    .listItem4Value {
        height: 16px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        width: 100px;
        overflow: hidden;
        margin: 0 10px;
    }

    .listItem4Ratio {
        height: 16px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00C573;
        line-height: 16px;
        width: 60px;
    }

    .listBox5 > .listItem5 {
        display: flex;
        align-items: center;
        margin-top: 17px;
    }

    .listItem5 .listItem5Name {
        width: 70px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem5 .listItem5ProgressBox {
        margin-right: 20px;
        margin-left: 10px;
        flex: 1;
        height: 16px;
        background: #EDEFF2;
        border-radius: 20px;
        display: flex;
        position: relative;
    }

    .listItem5ProgressBox .listItem5ProgressBar {
        height: 100%;
        background: #2CBB79;
        border-radius: 20px;
        /*position: relative;*/
        width: 0;
    }

    .listItem5ProgressBox .listItem5ProgressBar:after {
        content: attr(val);
        position: absolute;
        right: 5px;
        /*transform: translateX(100%);*/
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        top: 0;
    }

    .listItem5 .listItem5Ratio {
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;
        width: 60px;
        overflow: hidden;
    }

    .listBox5 > .listItem5:first-child .listItem5ProgressBox .listItem5ProgressBar {
        background: #FFB94D;
    }

    .listBox5 > .listItem5:first-child .listItem5Ratio {
        color: #FFB94D;
    }

    .reportSelect {
        width: 160px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        padding: 0 5px;
        border: 1px solid #EDEFF4;
        margin: 0 10px;
    }

    .reportSelect input, .reportTimeFreedom input {
        border-width: 0;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 19px;
    }

    .reportTimeFreedom {
        box-sizing: border-box;
        width: 240px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #EDEFF4;
        padding: 0 5px;
        display: flex;
        align-items: center;
    }

    .reportTimeFreedom .layui-icon {
        font-size: 30px;
        cursor: pointer;
    }

    .share1 > div {
        width: 100%;
    }

    .share2 > div {
        width: calc((100% - 20px) / 2);
    }

    .share3 > div {
        width: calc((100% - 40px) / 3);
    }

    .share4 > div {
        width: calc((100% - 60px) / 4);
    }

    .share5 > div {
        width: calc((100% - 80px) / 5);
    }

    .share6 > div {
        width: calc((100% - 100px) / 6);
    }

</style>
<div class="layui-fluid" id="reportBodyBox">
    <div class="reportBody">
        <!-- 头部报表-->
        <div class="reportMain">
            <div class="share1 reportBox layui-form">
                <div class="reportItem" style="height:429px" id="materialDay">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">成本中心统计</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportSelect">
                                <select name="costCenter" lay-filter="costCenter"></select>
                            </div>
                            <div class="reportTimeFreedom">
                                <i class="layui-icon layui-icon-date" id="timeIcon2"></i>
                                <input type="text" class="layui-input" readonly="true" id="time2" placeholder="请选择起止时间">
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标题 时间选择 -->
        <div class="headerBox" id="headerBox">
            <div class="headerTitle">用料数据分析</div>
            <div class="headerTime layui-form">
                <div class="selectBox" style="width: 180px">
                    <select name="costCenter" lay-filter="costCenterAll">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="timeSelect">
                    <select name="type" lay-filter="timeType">
                        <option value="2">请选择</option>
                        <option value="0">日</option>
                        <option value="1">周</option>
                        <option value="2" selected>月</option>
                    </select>
                </div>
                <div class="timeFreedom">
                    <i class="layui-icon layui-icon-date" id="timeIcon"></i>
                    <input type="text" class="layui-input" readonly="true" id="time1" placeholder="请选择起止时间">
                </div>
            </div>
        </div>

        <!-- 报表-->
        <div class="reportMain reportMainAll">
            <div class="reportBox share3">
                <div class="reportItem" style="height:460px" id="peopleCounting">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">按成本中心统计人数</div>
                        <div class="reportItemRight">
                            <!-- <div class="reportItemSwitch">
                                 <div class="reportItemSwitchItem active">按数量</div>
                                 <div class="reportItemSwitchItem">按金额</div>
                             </div>-->
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" style="height:460px" id="whoGetsTheMost">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">谁领的最多？</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="listBox3Header">
                        <div class="listBox3HeaderAvatar">头像</div>
                        <div class="listBox3HeaderName">姓名</div>
                        <div class="listBox3HeaderDepartment">部门</div>
                        <div class="listBox3HeaderAbnormal">领料数</div>
                        <div class="listBox3HeaderRatio">百分比</div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox3">
                                <!-- <div class="listItem3">
                                     <div class="listBox3Avatar">
                                         <img src="assets/images/head.png">
                                     </div>
                                     <div class="listBox3Name">张三</div>
                                     <div class="listBox3Department">软件部门</div>
                                     <div class="listBox3Abnormal">10000</div>
                                     <div class="listBox3Ratio">100.00%</div>
                                 </div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reportItem" style="height:460px" id="theMostConsumedSpecifications">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">消耗规格最多</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>物料消耗数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>物料消耗金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox1">
                                <!-- <div class="listItem1">
                                     <div class="listItem1Name">name</div>
                                     <div class="listItem1ProgressBox">
                                         <div class="listItem1ProgressBar"></div>
                                         <div class="listItem1Value">100</div>
                                     </div>
                                     <div class="listItem1Ratio">100.00%</div>
                                 </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reportBox share3">
                <div class="reportItem" style="height:460px" id="whoRepairMost">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">谁报修最多？</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" style="height:460px" id="whoScrapMost">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">谁报废最多？</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" style="height:460px" id="whoLossMost">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">谁报失最多？</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>物料消耗数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>物料消耗金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox2">
                                <!-- <div class="listItem2">
                                     <div class="listItem2Name">name</div>
                                     <div class="listItem2ProgressBox">
                                         <div class="listItem2ProgressBar" val="10000" ratio="100.00%"></div>
                                     </div>
                                 </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reportBox share3" style="">
                <!-- <div class="reportItem" style="height:460px" id="inventoryDepartment">
                     <div class="reportItemHeader">
                         <div class="reportItemTitle">盘验异常排名(按部门)</div>
                         <div class="reportItemRight">
                             <div class="reportItemSwitch">
                                 <div class="reportItemSwitchItem active">按数量</div>
                                 <div class="reportItemSwitchItem">按金额</div>
                             </div>
                             <div class="reportItemMore">
                                 更多<i class="layui-icon layui-icon-right"></i>
                             </div>
                         </div>
                     </div>
                     <div class="reportItemBox">
                         <div class="reportItemCenter">
                             <div class="listBox4">
                                 &lt;!&ndash; <div class="listItem4">
                                      <div class="listItem4Name">name</div>
                                      <div class="listItem4ProgressBox">
                                          <div class="listItem4ProgressBar"></div>
                                      </div>
                                      <div class="listItem4Value">4000000</div>
                                      <div class="listItem4Ratio">100.00%</div>
                                  </div>&ndash;&gt;
                             </div>
                         </div>
                     </div>
                 </div>-->
                <div class="reportItem" style="height:460px" id="inventoryCostCenter">
                    <div class="reportItemHeader">
                        <div class="reportItemTitle">盘验异常排名(按成本中心)</div>
                        <div class="reportItemRight">
                            <div class="reportItemSwitch">
                                <div class="reportItemSwitchItem active">按数量</div>
                                <div class="reportItemSwitchItem">按金额</div>
                            </div>
                            <div class="reportItemMore">
                                更多<i class="layui-icon layui-icon-right"></i>
                            </div>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox5">
                                <!--<div class="listItem5">
                                    <div class="listItem5Name">工单编号01</div>
                                    <div class="listItem5ProgressBox">
                                        <div class="listItem5ProgressBar" style="width: 80%" val="80"></div>
                                    </div>
                                    <div class="listItem5Ratio">80%</div>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--allDataChart -->
<!--数据图表弹窗-->
<script type="text/html" id="allDataChart">
    <form lay-filter="allDataChartForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div class="layui-row table-bor" style="height: calc(100% - 10px);" id="allDataChartFormchartDom"></div>
            <div style="display: none" id="allDataChartTableBox">
                <table class="layui-table" id="allDataChartTable" lay-filter="allDataChartTable"
                       style="display: none"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="allDataChartFormExport">导出数据</button>
        </div>
    </form>
</script>

<!--materialDataPop -->
<!--数据图表弹窗-->
<script type="text/html" id="materialDataPop">
    <form lay-filter="materialDataForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div>
                <table class="layui-table" id="materialDataTable" lay-filter="materialDataTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="materialDataFormExport">导出数据</button>
        </div>
    </form>
</script>


<!-- js部分 -->
<script src="/admin/assets/libs/echarts/echarts.min.js"></script>
<script src="/admin/assets/libs/echarts/echartsTheme.js"></script>

<script>
    layui.use(['layer', 'element', 'config', 'admin', 'form', 'table', 'laydate'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let element = layui.element;
        let config = layui.config;
        let table = layui.table;
        let admin = layui.admin;
        let form = layui.form;
        let laydate = layui.laydate;

        form.render('select');

        let topObj = {
                id: 'materialDay',
                url: 'enterprisecab/bill/admin/costCenter/list',
                name: '成本中心统计',
                data: [],
                parameter: {
                    param: 'qua', //qua 数量 money 金额
                    startTime: '',
                    endTime: '',
                    costCenter: ''
                },
            }, // 头部报表配置
            headerObj = {
                type: 2, // 时间选项 0日 1周 2月
                endTime: '', //结束时间
                startTime: '',//开始时间
                costCenter: '',//主柜参数
            }, // 主柜 时间 参数
            configData = {
                peopleCounting: {
                    id: 'peopleCounting', // 对应盒子的id
                    name: '按成本中心统计人数', // 对应盒子的表头
                    url: 'user/admin/user/costCenterBodyCount', // 请求地址
                    style: 1, // 显示图表的样式
                    data: [], // 请求的数据 需要存起来
                    size: 6, // 报表显示的数据条数
                    parameter: { // 请求参数
                        param: 'qua', //qua 数量 money 金额
                    },

                },
                whoGetsTheMost: {
                    id: 'whoGetsTheMost',
                    name: '谁领的最多？',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterGetMuch',
                    style: 2,
                    data: [],
                    size: 10,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },

                },
                theMostConsumedSpecifications: {
                    id: 'theMostConsumedSpecifications',
                    name: '消耗规格最多',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterConsumeMuch',
                    style: 3,
                    data: [],
                    size: 15,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },

                },
                whoRepairMost: {
                    id: 'whoRepairMost',
                    name: '谁报修最多',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterCcrap',
                    style: 4,
                    data: [],
                    size: 8,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },

                },
                whoScrapMost: {
                    id: 'whoScrapMost',
                    name: '谁报废最多？',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterScrappage',
                    style: 5,
                    data: [],
                    size: 10,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },

                },
                whoLossMost: {
                    id: 'whoLossMost',
                    name: '谁报失最多？',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterLost',
                    style: 6,
                    data: [],
                    size: 10,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                        // other: 'device',
                    },

                },
                /*  inventoryDepartment: {
                     id: 'inventoryDepartment',
                     name: '盘验异常排名(按部门)',
                     url: 'enterprisecab/bill/admin/costCenter/costCenterCheck',
                     style: 7,
                     data: [],
                     size: 15,
                     parameter: {
                         param: 'qua', //qua 数量 money 金额
                         // other: 'device',
                     },

                 },*/
                inventoryCostCenter: {
                    id: 'inventoryCostCenter',
                    name: '盘验异常排名(按成本中心)',
                    url: 'enterprisecab/bill/admin/costCenter/costCenterCheck',
                    style: 8,
                    data: [],
                    size: 15,
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                        // other: 'device',
                    },

                }

            };

        const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];


        admin.req('user/admin/department/getCostCenterList', {}, res => {
            if (res.code === 200) {
                loadReportSelectHtml(res.data, "请选择成本中心", 'costCenter', 3, 'materialDay');
                loadReportSelectHtml(res.data, "请选择成本中心", 'costCenter', 3, 'headerBox');
            } else {
                loadReportSelectHtml([], "请选择成本中心", 'costCenter', 3, 'materialDay');
                loadReportSelectHtml([], "请选择成本中心", 'costCenter', 3, 'materialDay');
            }
        });

        form.on('select(costCenter)', function (data) {
            topObj.parameter.costCenter = data.value;
            getTopReport(topObj);
        });

        init();

        function init() {
            // 请求顶部报表数据
            getTopReport(topObj);

            //  请求报表数据
            getReportData(configData);

        }

        $("#reportBodyBox").scroll(function () {
            if ($('#materialDay').offset().top <= (-339)) {
                $('#headerBox').css({
                    'position': 'fixed',
                    top: '100px',
                    width: $('#headerBox').parent().width() + "px"
                });
                $('.reportMainAll').css({marginTop: "60px"})

            } else {
                $('#headerBox').css({'position': 'relative', top: '0'});
                $('.reportMainAll').css({marginTop: "0"})
            }
        });

        // 请求顶部报表数据
        function getTopReport(_obj) {
            admin.req(_obj.url, _obj.parameter, res => {
                if (res.code === 200) {
                    topObj.data = res.data.data;
                    topObj.name = res.data.title;
                    showTopReport(topObj);
                }
            })
        }

        // 渲染顶部报表数据
        function showTopReport(_obj) {
            let _elem = document.getElementById(_obj.id).querySelector('.reportItemEcharts');
            $(_elem).attr('_echarts_instance_', '');
            let chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], option, data1 = [];
            let data = _obj.data;

            data.forEach(item => {
                xAxisData.push(item.name);
                data1.push(item.value1)
            });

            option = {
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let htmlStr = '', str = '';
                        parms.forEach(item => {
                            htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div>${item.value}</div>
                                       </div>`
                        });
                        str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                            "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + "</div>";
                        return str;
                    }
                },
                grid: {
                    top: '30',//上边距
                    right: '0',//右边距
                    left: '10',//左边距
                    bottom: '10%',//下边距
                    containLabel: true,
                },
                legend: [
                    {
                        data: ['成本数量', '最小单位数量'],
                        icon: 'line',
                        left: '15%',
                        itemWidth: 20,
                        itemHeight: 20,
                        textStyle: {
                            fontSize: 16
                        }
                    },

                ],
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        formatter: (v) => v.slice(0, 10)
                    },
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: 'rgba(0,0,0,0.65)',
                            textStyle: {
                                fontSize: 14
                            },
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(223, 223, 223, 1)',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(223, 223, 223, 1)',
                                type: "dashed",
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLabel: {
                            color: 'rgba(0,0,0,0.65)',
                            textStyle: {
                                fontSize: 14
                            },
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(223, 223, 223, 1)',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(223, 223, 223, 1)',
                                type: "dashed",
                            }
                        }

                    }
                ],
                series: [
                    {
                        name: '成本数量',
                        type: 'line',
                        data: data,
                        symbolSize: 8, //标记的大小
                        yAxisIndex: 0,
                        lineStyle: {
                            color: "#009C5E",
                            width: 3,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#009C5E",
                            borderWidth: 4,
                        },
                    },
                    {
                        name: '最小单位数量',
                        type: 'line',
                        data: data1,
                        yAxisIndex: 1,
                        symbolSize: 8, //标记的大小
                        lineStyle: {
                            color: "#FFB94D",
                            width: 3,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#FFB94D",
                            borderWidth: 4,
                        },
                    },
                ],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [0],
                    bottom: 0,
                    start: 100 - (15 / data.length) * 100,
                    end: 100,
                    handleSize: '110%',
                    handleStyle: {color: "#009C5E"},
                    textStyle: {color: "#000"},
                    fillerColor: "rgb(0,181,89,0.3)",
                    borderColor: "rgb(0,181,89,0.3)",

                }],
            };
            option && myChart.setOption(option, true);
        }

        // 顶部报表数量金钱切换
        $('#materialDay .reportItemSwitch>div').click(function () {
            if (!$(this).hasClass('active')) {
                //qua 数量  money金额
                $(this).index() === 0 ? topObj.parameter.param = 'qua' : topObj.parameter.param = 'money';
                $(this).addClass('active').siblings().removeClass('active');
                getTopReport(topObj)
            }
        });


        //请求主柜下拉数据
        /*admin.req('enterprisecab/cabinet/admin/cabinet/getCabinetByCabinetNature?limit=9999', {}, res => {
            if (res.code === 200) {
                loadReportSelectHtml(res.data, "全部", 'mainCabCode', 2, 'headerBox')
            } else {
                loadReportSelectHtml([], "全部", 'mainCabCode', 2, 'headerBox')
            }
        }, 'get');*/

        // 用料数据分析 所有报表  主柜选项
        form.on('select(costCenterAll)', function (data) {
            headerObj.costCenter = data.value;
            getReportData(configData);
        });

        // 时间选择
        form.on('select(timeType)', function (data) {
            headerObj.type = data.value;
            headerObj.startTime = '';
            headerObj.endTime = '';
            $('#time1').val('');
            getReportData(configData);
        });

        let time1 = laydate.render({
            elem: '#time1',
            type: 'date',
            eventElem: '#timeIcon',
            trigger: 'click',
            range: "至",
            done: function (value, date, endDate) {
                if (value) {
                    let timeArray = value.split("至");
                    $('select[lay-filter="timeType"]').val('');
                    headerObj.type = '';
                    headerObj.startTime = timeArray[0].trim() + " 00:00:00";
                    headerObj.endTime = timeArray[1].trim() + " 23:59:59";
                } else {
                    $('select[lay-filter="timeType"]').val(2);
                    headerObj.type = 2;
                    headerObj.startTime = '';
                    headerObj.endTime = '';
                }
                form.render('select');

                getReportData(configData);
            }
        });

        let time2 = laydate.render({
            elem: '#time2',
            type: 'date',
            range: "至",
            eventElem: '#timeIcon2',
            trigger: 'click',
            done: function (value, date, endDate) {
                if (value) {
                    let timeArray = value.split("至");
                    topObj.parameter.startTime = timeArray[0].trim() + " 00:00:00";
                    topObj.parameter.endTime = timeArray[1].trim() + " 23:59:59";
                } else {
                    topObj.parameter.startTime = '';
                    topObj.parameter.endTime = '';
                }
                getTopReport(topObj);
            }
        });


        // 请求报表数据
        function getReportData(_data) {
            for (let item in _data) {
                if (configData[item].url) {
                    admin.req(configData[item].url, Object.assign({}, headerObj, configData[item].parameter), res => {
                        if (res.code === 200) {
                            configData[item].data = res.data.data;
                            configData[item].name = res.data.title;
                            if (res.data.totalSum) {
                                configData[item].totalSum = res.data.totalSum;
                            }
                            if (res.data.unit) {
                                configData[item].unit = res.data.unit;
                            }
                            if (res.data.totalSumOne) {
                                configData[item].totalSumOne = res.data.totalSumOne;
                            }
                            initReport(configData[item]);
                        }
                    })
                } else {
                    configData[item].data = [];
                    initReport(configData[item]);
                }
            }
        }

        function initReport(_data) {
            $('#' + _data.id).find('.reportItemTitle').text(_data.name);
            /*eval('showReportTemplate' + _data.style + '(' + JSON.stringify(_data) + ')')*/

            switch (_data.style) {
                case 1:
                    // 当expression的值等于value1时执行的代码
                    showReportTemplate1(_data);
                    break;
                case 2:
                    showReportTemplate2(_data);
                    break;
                case 3:
                    showReportTemplate3(_data);
                    break;
                case 4:
                    showReportTemplate4(_data);
                    break;
                case 5:
                    showReportTemplate5(_data);
                    break;
                case 6:
                    showReportTemplate6(_data);
                    break;
                case 7:
                    showReportTemplate7(_data);
                    break;
                case 8:
                    showReportTemplate8(_data);
                    break;
                default:
                // 当expression的值与所有case的值都不匹配时执行的代码
            }
        }


        // 所有报表数量金钱切换
        $('.reportMainAll .reportItemSwitch>div').click(function () {
            if (!$(this).hasClass('active')) {
                let obj = {};

                //qua 数量  money金额
                configData[$(this).parents('.reportItem').attr('id')].parameter.param = $(this).index() === 0 ? 'qua' : 'money';
                $(this).addClass('active').siblings().removeClass('active');

                obj[$(this).parents('.reportItem').attr('id')] = configData[$(this).parents('.reportItem').attr('id')];

                getReportData(obj)
            }
        });

        //模板1
        function showReportTemplate1(_obj) {
            let _elem = document.getElementById(_obj.id).querySelector('.reportItemEcharts');
            $(_elem).attr('_echarts_instance_', '');
            const myChart = echarts.init(_elem);
            let seriesData = [], xAxisData = [], option = {};
            let data = _obj.data.slice(0, _obj.size || 10);
            data.forEach((item, index) => {
                if(!item.name || item.name==''){
                    item.name = '未知名称'+index
                }
                xAxisData.push(item.name);
                seriesData.push(item)
            });

            option = {
                color: colorList,
                title: {
                    text: priceUnit(_obj.totalSum.value),
                    subtext: '总人数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: '46%',
                    x: '22%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 14,
                    itemHeight: 14,
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 18,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }

                        });
                        return [`{name|${params.substring(0, 10)}}{value|${isNullObj(value)}} {ratio|${isNullObj(ratio, '%')}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 20,
                                color: '#000',
                                width: 100,
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;color: #2CBB79'>" +
                            "<div>数值：" + parms.data.value + "</div>" +
                            "<div>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: [
                    {
                        radius: ['28%', '48%'],
                        center: ['23%', '50%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },
                    {
                        color: 'rgba(250,250,250,0.5)',
                        radius: ['45%', '52%'],
                        center: ['23%', '50%'],
                        label: {show: false},
                        type: 'pie',
                        data: [{value: 1}],
                        tooltip: {
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板2
        function showReportTemplate2(_obj) {
            let html = "";

            if (_obj.unit) {
                $('#' + _obj.id + ' .reportItemUnit').text("（单位：" + _obj.data.unit + "）");
            } else {
                $('#' + _obj.id + ' .reportItemUnit').text("（单位：" + (_obj.parameter.param == 'qua' ? '支' : '元') + "）");
            }
            $('#' + _obj.id + ' .listBox3HeaderAbnormal').text(_obj.parameter.param == 'qua' ? '领料数' : '领料金额');


            if (!_obj.data || _obj.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _obj.data.slice(0, _obj.size || 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    html += `<div class="listItem3">
                                <div class="listBox3Avatar"><img src="${item.headerImg || 'assets/images/head.png'}"></div>
                                <div class="listBox3Name">${item.name || ' '}</div>
                                <div class="listBox3Department">${item.departmentName}</div>
                                <div class="listBox3Abnormal">${item.value}</div>
                                <div class="listBox3Ratio">${isNullObj(item.ratio)}</div>
                            </div>`
                })
            }
            $('#' + _obj.id).find('.listBox3').html(html);
        }

        //模板3
        function showReportTemplate3(_obj) {
            let html = "";
            if (_obj.totalSum) {
                $('#' + _obj.id + ' .reportItemTips1 span').text(_obj.totalSum[0].totalNum || 0);
                $('#' + _obj.id + ' .reportItemTips2 span').text(_obj.totalSum[0].totalAmount || 0);
            }

            if (!_obj.data || _obj.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _obj.data.slice(0, _obj.size || 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value / 100;
                    }
                    html += ` <div class="listItem1">
                                <div class="listItem1Name">${item.name}</div>
                                <div class="listItem1ProgressBox">
                                    <div class="listItem1ProgressBar" style="width: ${(item.value / refer)}%"></div>
                                    <div class="listItem1Value">${item.value}</div>
                                </div>
                                <div class="listItem1Ratio">${item.ratio}</div>
                             </div>`;
                })
            }
            $('#' + _obj.id).find('.listBox1').html(html);
        }

        //模板4
        function showReportTemplate4(_obj) {
            let _elem = document.getElementById(_obj.id).querySelector('.reportItemEcharts');
            $(_elem).attr('_echarts_instance_', '');
            const myChart = echarts.init(_elem);

            let seriesData = [], xAxisData = [], option = {};
            let data = _obj.data.slice(0, _obj.size || 8);
            data.forEach((item, index) => {
                xAxisData.push(item.name);
                seriesData.push(item)
            });

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: _obj.parameter.param === 'money' ? '总金额' : '总数量',
                    subtext: priceUnit(_obj.totalSum ? _obj.totalSum.value : 0),
                    itemGap: 10,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '27%',
                    textStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                    subtextStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 25,
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }

                        });
                        return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#666666',
                                fontWeight: '500',
                                width: 100,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#666666',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ['28%', '50%'],
                        radius: ["50%", "65%"],
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                borderColor: "#fff"
                            }
                        },
                        label: {
                            show: false
                        },
                        data: seriesData,
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板5
        function showReportTemplate5(_obj) {
            let _elem = document.getElementById(_obj.id).querySelector('.reportItemEcharts');
            $(_elem).attr('_echarts_instance_', '');
            const myChart = echarts.init(_elem);

            let seriesData = [], xAxisData = [], option = {};
            let data = _obj.data.slice(0, _obj.size || 10);
            data.forEach((item, index) => {
                xAxisData.push(item.name);
                seriesData.push(item)
            });


            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: priceUnit(_obj.totalSum ? _obj.totalSum.value : 0),
                    subtext: _obj.parameter.param === 'money' ? '领料总金额' : '领料总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '21%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: [
                    {
                        orient: 'vertical',
                        right: '29%',
                        top: 'center',
                        align: 'left',
                        itemWidth: 4,
                        itemHeight: 25,
                        itemStyle: {
                            borderRadius: '30',
                        },
                        textStyle: {
                            color: "#333"
                        },
                        itemGap: 10,
                        data: seriesData.slice(0, Math.ceil(seriesData.length / 2)),
                        formatter: function (params) {
                            let value = "", ratio = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                }

                            });
                            return [`{name|${params.slice(0, 10)}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    width: 120,
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#666666',
                                    fontWeight: '500',
                                    width: 70,
                                    overflow: 'hidden',
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#666666',
                                    fontWeight: '500',
                                    width: 50,
                                },
                            }

                        },
                    },
                    {
                        orient: 'vertical',
                        right: '0%',
                        top: 'center',
                        align: 'left',
                        itemWidth: 4,
                        itemHeight: 25,
                        itemStyle: {
                            borderRadius: '30',
                        },
                        textStyle: {
                            color: "#333"
                        },
                        itemGap: 10,
                        data: seriesData.slice(Math.ceil(seriesData.length / 2)),
                        formatter: function (params) {
                            let value = "", ratio = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                }

                            });
                            return [`{name|${params.slice(0, 10)}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#666666',
                                    fontWeight: '500',
                                    width: 70,
                                    overflow: 'hidden',
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#666666',
                                    fontWeight: '500'
                                },
                            }

                        },
                    }
                ],
                series: [
                    {
                        type: "pie",
                        center: ['22%', '50%'],
                        radius: ["30%", "45%"],
                        label: {
                            show: false
                        },
                        data: seriesData,
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板6
        function showReportTemplate6(_obj) {
            let html = "";

            if (_obj.totalSum) {
                $('#' + _obj.id + ' .reportItemTips1 span').text(_obj.totalSum[0].totalNum || 0);
                $('#' + _obj.id + ' .reportItemTips2 span').text(_obj.totalSum[0].totalAmount || 0);
            }

            if (!_obj.data || _obj.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _obj.data.slice(0, _obj.size || 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value / 100;
                    }
                    html += `<div class="listItem2">
                                    <div class="listItem2Name">${item.name}</div>
                                    <div class="listItem2ProgressBox">
                                        <div class="listItem2ProgressBar" val="${item.value}" ratio="${item.ratio}" style="width: ${(item.value / refer)}%"></div>
                                    </div>
                                </div>`;
                })
            }
            $('#' + _obj.id).find('.listBox2').html(html);
        }

        //模板7
        function showReportTemplate7(_obj) {
            let html = "";

            if (!_obj.data || _obj.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _obj.data.slice(0, _obj.size || 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value / 100;
                    }
                    html += `<div class="listItem4">
                                 <div class="listItem4Name">${item.name}</div>
                                 <div class="listItem4ProgressBox">
                                     <div class="listItem4ProgressBar" style="width: ${(item.value / refer)}%"></div>
                                 </div>
                                 <div class="listItem4Value">${item.value}</div>
                                 <div class="listItem4Ratio">${item.ratio}</div>
                              </div> `;
                })
            }
            $('#' + _obj.id).find('.listBox4').html(html);
        }

        //模板8
        function showReportTemplate8(_obj) {
            let html = "";

            if (!_obj.data || _obj.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _obj.data.slice(0, _obj.size || 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value / 100;
                    }
                    html += `<div class="listItem5">
                                <div class="listItem5Name">${item.name}</div>
                                <div class="listItem5ProgressBox">
                                <div class="listItem5ProgressBar" style="width: ${(item.value / refer)}%" val="${item.value}"></div>
                                </div>
                                <div class="listItem5Ratio">${item.ratio}%</div>
                             </div>`;
                })
            }
            $('#' + _obj.id).find('.listBox5').html(html);
        }


        // 更多
        $('.reportMainAll .reportItemMore').click(function () {
            if (configData[$(this).parents('.reportItem').attr('id')].data.length === 0) {
                layer.msg('暂时没有数据~~~', {icon: 5});
                return false;
            }
            showAllDataChart(configData[$(this).parents('.reportItem').attr('id')])
        });

        $('#materialDay .reportItemMore').click(function () {
            showAllDataChart(topObj)
        });

        // 更多弹窗
        function showAllDataChart(_data) {

            admin.open({
                type: 1,
                area: ['1400px', '700px'],
                offset: '65px',
                title: _data.name,
                content: $('#allDataChart').html(),
                success: function () {
                    const myChart = echarts.init(document.getElementById('allDataChartFormchartDom'));
                    let seriesData = [], seriesData1 = [], seriesData2 = [], yAxisData = [], option, dataZoomObj = '',
                        seriesObjData = [], tooltipObj = {}, colors = ['#01B780'];
                    let colsData = [{field: 'name', title: '名称'}];
                    let data = _data.id == "materialDay" ? [..._data.data] : [..._data.data.reverse()];
                    data.forEach(item => {
                        yAxisData.push(item.name);
                        seriesData.push(item);
                        if (item.value1) {
                            seriesData1.push(item.value1)
                        }
                        if (item.value2) {
                            seriesData2.push(item.value2)
                        }
                    });
                    if (data[0].ratio) {
                        colsData.push({field: 'ratio', title: '占比'})
                    }

                    if (seriesData2.length > 0) {
                        colsData.push({field: 'value', title: '暂存'}, {field: 'value1', title: '报修'}, {
                            field: 'value2',
                            title: '报废'
                        });
                        seriesObjData.push(
                            {name: '暂存', type: 'bar', barWidth: '15', stack: '2', data: seriesData},
                            {name: '报修', type: 'bar', barWidth: '15', stack: '2', data: seriesData1},
                            {name: '报废', type: 'bar', barWidth: '15', stack: '2', data: seriesData2}
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let htmlStr = '', str = '';
                                parms.forEach(item => {
                                    htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div>${item.value}</div>
                                       </div>`
                                });
                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                                    "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + "</div>";
                                return str;
                            }
                        };
                        colors = ['#F77234', '#FFB94D', '#2CBB79'];
                    } else if (seriesData1.length > 0) {
                        colsData.push({field: 'value', title: '成本数量'}, {field: 'value1', title: '最小单位数量'});
                        seriesObjData.push(
                            {name: '成本数量', type: 'bar', barWidth: '15', stack: '2', data: seriesData},
                            {name: '最小单位数量', type: 'bar', barWidth: '15', stack: '2', data: seriesData1}
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let htmlStr = '', str = '';
                                parms.forEach(item => {
                                    htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div>${item.value}</div>
                                       </div>`
                                });
                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                                    "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + "</div>";
                                return str;
                            }
                        };
                        colors = ['#2CBB79', '#FFB94D'];
                    } else {
                        colsData.push({field: 'value', title: '数值'});
                        seriesObjData.push(
                            {name: _data.data.title, type: 'bar', barWidth: '15', data: seriesData}
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let str = '', code = '';
                                if (parms[0].data.oldSpecCode) {
                                    code = "<div>规格：" + parms[0].data.oldSpecCode + "</div>"
                                } else {
                                    code = ""
                                }

                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;color: #2CBB79'>" +
                                    "<div>数值：" + parms[0].data.value + "</div>" +
                                    "<div>占比：" + isNullObj(parms[0].data.ratio) + "</div>" + code +
                                    "<div>名称：" + parms[0].data.name + "</div></div>";
                                return str;
                            }
                        };
                        colors = ['#01B780'];
                    }

                    if (data[0].oldSpecCode) {
                        colsData.push({field: 'oldSpecCode', title: '物料规格'})
                    }


                    if (seriesData.length > 10) {
                        dataZoomObj = {
                            type: 'slider',
                            startValue: 1,
                            endValue: 10,
                            show: true,
                            right: 0,
                            width: 20,
                            start: 100 - (10 / seriesData.length) * 100,
                            end: 100,
                            yAxisIndex: 0,
                            handleStyle: {color: "#009C5E"},
                            textStyle: {color: "#000"},
                            fillerColor: "rgb(0,181,89,0.3)",
                            borderColor: "rgb(0,181,89,0.3)",
                        }
                    } else {
                        dataZoomObj = ''
                    }

                    option = {
                        color: colors,
                        tooltip: tooltipObj,
                        grid: {
                            left: '30',
                            right: '2%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: yAxisData,
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                                formatter: (v) => {
                                    if (v.length > 10) {
                                        v = v.substring(0, 10) + '...';
                                    }
                                    return v;
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        dataZoom: dataZoomObj,
                        series: seriesObjData
                    };
                    option && myChart.setOption(option, true);


                    let allDataChartTb = table.render({
                        elem: '#allDataChartTable',
                        data: data,
                        cellMinWidth: 100,
                        page: false,
                        title: _data.name,
                        cols: [colsData],
                    });

                    if (data.length === 0) {
                        $('#allDataChartFormExport').remove();
                    } else {
                        $('#allDataChartFormExport').click(function () {
                            table.exportFile(allDataChartTb.config.id, [...data].reverse(), 'xls', _data.name)
                        })
                    }

                }
            });

        }

        // 判断是否是 空{} _data判断对象  _type拼接字段
        function isNullObj(_data, _type) {
            let newData = '0';
            if (_data) {
                if (JSON.stringify(_data) == "{}") {
                    newData += _type ? _type : "";
                    return newData
                } else {
                    newData = _data;
                    return newData
                }
            }
            newData += _type ? _type : "";
            return newData;
        }

        //单位转换
        function priceUnit(num) {
            let unit = ['', '万', '亿', '万亿'];
            let k = 10000, i;
            if (num < k) {
                return num
            } else {
                i = Math.floor(Math.log(num) / Math.log(k));
                return (num / Math.pow(k, i)).toFixed(2) + unit[i]
            }
        }

        // 渲染下拉框
        function loadReportSelectHtml(data, tips, htmltarget, type, parentName) {
            let html = ' <option value="">' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                if (type == 1) {
                    html += `<option value='${data[i].name}'>${data[i].name}</option>`;
                } else if (type == 2) {
                    html += `<option value='${data[i].cabCode}'>${data[i].cabCode}</option>`;
                } else if (type == 3) {
                    html += `<option value='${data[i].costCenter}'>${data[i].name}</option>`;
                } else {
                    html += `<option value='${data[i].id}'>${data[i].name}</option>`;
                }
            }
            $("#" + parentName).find("select[name='" + htmltarget + "']").html(html);
            form.render('select');
        }

    });
</script>
